<ion-header>
  <ion-navbar color="primary">
    <ion-title>
    待办事件
    </ion-title>
    
    <ion-buttons end>
      <button ion-button icon-Left (click)="addTask()" >
        
        <ion-icon name="add"></ion-icon><!--新增--></button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

<ion-content padding>
  
   <ion-refresher (ionRefresh)="doRefresh($event)">
     <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="下拉刷新"
        refreshingSpinner="circles"
        refreshingText="刷新..."
     ></ion-refresher-content>
   </ion-refresher><!--增加一个组件，下拉刷新-->

    <ion-list>
      <ion-item-sliding #slidingItem *ngFor="let task of tasks" >
       <ion-item [ngClass]="{'task_done':task.status==='done'}" (click)="editTask(task)">{{task.title}}</ion-item>
       <!--显示待办事件-->
       <ion-item-options side="right" (ionSwipe)="removeTask(slidingItem,task)"><!--按钮的显示-->
         <button ion-button icon-only color="secondary" (click)="markAsDone(slidingItem,task)">
           <!--sliding滑动，操作谁关闭谁-->
           <ion-icon name="checkmark"></ion-icon>
           <!--用图标来设button就用ion-icon name-->
         </button>
         <button ion-button icon-only expandable color="danger" (click)="removeTask(slidingItem,task)">
          <!--因为增加了一个全扫功能ionSwipe所有垃圾线的图标要扩伸-->  
          <ion-icon name="trash"></ion-icon>
         </button>
       </ion-item-options>
       </ion-item-sliding>
     </ion-list>
    
    
  <!--The world is your oyster.-->
  <!--
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  -->
</ion-content>
